<template>
    <div class="updatePasswordDialog">
        <el-dialog :close-on-click-modal="isModelClose" :before-close="close" title="修改密码" :style="dialogStyle" v-if="userDialogVisible" :visible.sync="userDialogVisible">
            <el-form ref="updatePasswordForm" :model="form" :rules="rules">
                <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                    <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" :label-width="formLabelWidth" prop="confirmPassword">
                    <el-input type="password" v-model="form.confirmPassword" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitForm('updatePasswordForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
    import AdminApiActions from '@/components/api/admin-api-actions'
    import $ from "jquery";
    @Component
    export default class UpdatePasswordDialog extends Vue {
        @Prop() params: any;
        private paramData: any = {};
        private userDialogVisible: boolean = true;
        private dialogStyle: any = {};
        private isModelClose: boolean = false;
        private form: any = {
            oldPassword: '',
            password: '',
            confirmPassword: ''
        }
        //表单校验
        private rules: any = {
            password: [
                { required: true, message: '密码不能为空', trigger: 'blur' }
            ],
            confirmPassword: [
                { required: true, message: '确认密码不能为空', trigger: 'blur' }
            ]
        }
        //创建时调用
        async created() {
            this.centerDialog();
        }

        @Emit("close")
        private close() {
            this.userDialogVisible = false;
        }

        @Emit("confirm")
        private confirm() {
            this.userDialogVisible = false;
        }
        //提交表单
        private submitForm(formName) {
            (this.$refs[formName] as any).validate((valid) => {
                if (valid) {
                    this.updatePassword();
                } else {
                    return false;
                }
            });
        }
        //编辑分组
        private async updatePassword() {
            await AdminApiActions.updatePassword(this.form);
            this.close();
        }
        private centerDialog() {
            this.$nextTick(() => {
                let height = $(window).height();
                let dialogHeight = $(".updatePasswordDialog .el-dialog").height();
                this.dialogStyle = {
                    top: (height / 2 - dialogHeight / 2) + "px"
                }
            })
        }

    }
</script>
<style lang="less">
    .updatePasswordDialog {
        position: absolute;
        width: 100%;
        height: 100%;

        .el-dialog__body {
            padding-bottom: 0px;
        }

        .el-dialog {
            width: 40%;
            margin-top: 0px !important;

            .dialog-footer {
                display: flex;
                justify-content: center;
            }
        }

        .el-form-item {
            display: flex;

            .el-form-item__label {
                width: 100px;
            }

            .el-form-item__content {
                flex: 1;
            }
        }
    }
</style>